<!DOCTYPE html>
<html>

<head>
    <title>Chat with Jlama</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js" integrity="sha512-7Pi/otdlbbCR+LnW+F7PwFcSDJOuUJB3OxtEHbg4vSMvzvJjde4Po1v4BR9Gdc9aXNUNFVUY+SK51wWT8WF0Gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/13.0.0/marked.min.js" integrity="sha512-NlNyxz9EmQt8NOeczUXqghpfmRIHlCfE5qRKftWYA44tf8sveWGZhSHxVtGtyHlmqdt89f66F26aWi+kTDz8RQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.5/purify.min.js" integrity="sha512-JatFEe90fJU2nrgf27fUz2hWRvdYrSlTEV8esFuqCtfiqWN8phkS1fUl/xCfYyrLDQcNf3YyS0V9hG7U4RHNmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="chat.css">
</head>

<body data-bs-theme="dark">
    <div class="container">
        <div class="row pt-3">
            <div class="col-md-8 col-12">
                <h1>Chat with Jlama</h1>
            </div>
        </div>
        <div id="scroll-wrapper">
            <div id="chat-container" class="card">
                <div class="card-body">
                    <div id="chat-history"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container p-2 card" id="input-area">
        <div class="input-group">
            <textarea class="form-control" id="user-input" placeholder="Type your question here..."></textarea>
            <button id="send-button" class="btn btn-primary">Send</button>
        </div>
        <div id="session"></div>
    </div>

  <script src="api.js"></script>
  <script src="chat.js"></script>
</body>

</html>
